<template>
  <Card>
    <div class="content">
      <div class="content-list">
        <div
          @click="lookDetail(item.eventId, 'VIEW')"
          v-for="(item, index) in dataList"
          :key="index"
          :class="['info', index == 0 ? 'info-yellow' : 'info-blue']"
        >
          <div class="info-view">
            <div class="info-view-left">{{ item.title || "--" }}</div>
            <div class="info-view-right">{{ item.createTime || "--" }}</div>
          </div>
          <div class="info-desc">
            {{ item.content || "--" }}
          </div>
        </div>
      </div>
      <div class="content-change-btn" @click="loadData">
        <img src="@/assets/refresh.png" alt="/" />
        <div class="content-change-btn-text">换一批</div>
      </div>
      <div class="content-bottom">
        <div class="btn-group">
          <div class="btn-group-1 btn-group-s" @click="goto('/postWish')">
            <img src="@/assets/zbm-fb.png" />
            <div class="btn-group-text">新增心愿</div>
          </div>
          <div class="btn-group-2 btn-group-s" @click="goto('/seekHelp')">
            <img src="@/assets/zbm-gc.png" />
            <div class="btn-group-text">心愿广场</div>
          </div>
          <div class="btn-group-3 btn-group-s" @click="goto('/myWish')">
            <img src="@/assets/zbm-wdxy.png" />
            <div class="btn-group-text">我的心愿</div>
          </div>
          <div class="btn-group-4 btn-group-s" @click="goto('/honorRoll')">
            <img src="@/assets/zbm-grb.png" />
            <div class="btn-group-text">光荣榜</div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from "@/components/Card.vue";
import { postListRand } from "@/api/business";
import { getUserInfo } from "@/api/user";
const config = require("../../config");

// 判断公众号截取code
const getUrlParam = (name) => {
  let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  let r = window.location.hash.split("?")[1].match(reg);
  if (r != null) {
    return decodeURIComponent(r[2]);
  }
  return null;
};
export default {
  name: "Home",
  components: { Card },
  data() {
    return {
      dataList: [],
      code: "",
    };
  },
  computed: {},
  methods: {
    goto(path) {
      if (path == "/postWish") {
        this.$router.push({ path, query: { eventId: null, type: "ADD" } });
      } else {
        this.$router.push(path);
      }
    },
    lookDetail(eventId) {
      this.$router.push({
        path: "/wishDetail",
        query: { eventId, type: "VIEW" },
      });
    },
    loadData() {
      postListRand({ limit: 3 }).then((res) => {
        this.dataList = res.data || [];
      });
    },
    getWxCode() {
      this.code = getUrlParam("authCode"); //是否存在authCode
      this.loadUserInfo();
    },
    loadUserInfo() {
      getUserInfo({
        authCode: this.code,
        appName: config.appAbbr,
      }).then((res) => {
        this.$store.commit("user/setLoginData", res.data);
        this.loadData();
      });
    },
  },
  mounted() {
    if (!this.$store.getters.userInfo.token) {
      this.getWxCode();
    } else {
      this.loadData();
    }
  },
};
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/bg.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  &-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    .info {
      padding: 30px;
      margin: 20px 30px;
      border-radius: 10px;
      color: white;
      width: calc(100% - 120px);
      &-yellow {
        background: linear-gradient(
          135deg,
          rgb(238, 126, 68),
          rgb(242, 161, 64)
        );
      }

      &-blue {
        background: linear-gradient(
          135deg,
          rgb(97, 190, 183),
          rgb(91, 190, 230)
        );
      }

      &-view {
        display: flex;
        justify-content: space-between;
        &-left {
          font-size: 17px;
        }
        &-right {
          font-size: 14px;
        }
      }
      &-desc {
        font-size: 16px;
        margin-top: 30px;
        @include text-multiple-ellipsis;
      }
    }
  }
  &-change-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 80px;
    border-radius: 40px;
    background: rgba(53, 10, 29, 0.5);
    margin: 0 auto;

    img {
      width: 52px;
      height: 52px;
    }

    &-text {
      margin-left: 20px;
      font-size: 14px;
      color: white;
    }
  }
  &-bottom {
    width: 100%;
    .btn-group {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
      width: 100%;
      padding-bottom: 50px;

      img {
        width: 52px;
        height: 52px;
      }

      &-text {
        margin-left: 20px;
        font-size: 16px;
        font-weight: bold;
        color: white;
      }
      &-s {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        border-radius: 40px;
        width: 40%;
        padding: 20px 0;
        margin: 20px 0;
      }
      &-1 {
        background: linear-gradient(45deg, rgb(235, 98, 70), rgb(240, 165, 86));
      }

      &-2 {
        background: linear-gradient(
          45deg,
          rgb(111, 91, 245),
          rgb(110, 199, 249)
        );
      }
      &-3 {
        background: linear-gradient(45deg, #0680fa, #6ab0f7);
      }

      &-4 {
        background: linear-gradient(45deg, #c14c54, #ff6666);
      }
    }
  }
}
</style>
